<template>
	<view class="container">
		<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
		<scroll-view scroll-y class="scroll" @scrolltolower="onreachBottom">
			<view v-for="(item,index) in msgList" :key="index">
				<u-card class="card" @click="cardClick(item.deviceID)" :thumb="getIconByType(item.msgType)"
					thumb-width="32" border-radius="30" :index="index" :title-color="getColorByType(item.msgType)"
					:title="item.msgType" :sub-title="item.msgDate">
					<template v-slot:body>
						<view style="color: black;">{{item.content}}</view>
					</template>
				</u-card>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageSize: 3,
				pageIndex: 1,
				list: [
					'设备3079已完成采样',
				],
				iconType: '/static/imgs/消息.png',
				titleColor: '#6c0000',
				msgList: [{
						msgType: '系统消息',
						msgDate: '2024-07-19 11:05:55',
						content: '已绑定设备3079，可以进行相关操作',
						deviceID: ''
					},
					{
						msgType: '采样消息',
						msgDate: '2024-07-19 11:05:55',
						content: '设备3079已完成采样，点击可以查看数据详情',
						deviceID: '3079'
					}
				]
			}
		},
		methods: {
			onreachBottom() {
				console.log('到达底部')
				uni.showLoading({
					title: "数据加载中...",
					mask: true
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000);
			},
			cardClick(e) {
				console.log(e)
			},
			getIconByType(type) {
				switch (type) {
					case '系统消息':
						return '/static/imgs/消息.png'
					case '采样消息':
						return '/static/imgs/xiaoxitishi.png'
					default:
						return '/static/imgs/lingdang.png'
				}
			},
			getColorByType(type) {
				switch (type) {
					case '系统消息':
						return '#00aaff'
					case '采样消息':
						return '#e34555'
					default:
						return '/static/imgs/lingdang.png'
				}
			}
		}
	}
</script>

<style>
	.container {
		/* border: solid 1rpx red; */
		height: calc(92.5vh - var(--window-top));
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.scroll {
		position: relative;
		height: 100%;
		overflow-y: auto;
		width: 100%;
		/* border: solid 1rpx #55ff00; */
	}

	.card {
		border: 1rpx solid #bfbfbf;
		border-radius: 20rpx;
	}
</style>